<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
        <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/v0.2.4/dist/leaflet.draw.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
        <script src="https://maps.google.com/maps/api/js?v=3"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
        <script src="https://rawgit.com/Leaflet/Leaflet.draw/v0.2.4/dist/leaflet.draw.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
        <script src="../../libs/Cesium/Build/Cesium/Cesium.js"></script>
        <link rel="stylesheet" href="../../libs/Cesium/Build/Cesium/Widgets/widgets.css" />
        <style>
            #container {
                position: absolute;
                top: 100px;
                bottom: 100px;
                left: 100px;
                right: 600px;
                overflow: hidden;
            }
            #help {
                position: absolute;
                top: 100px;
                bottom: 100px;
                width: 500px;
                right: 50px;
                padding: 10px;
                border: solid 1px black;
            }
            #map {
                position:absolute;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            h1 {
                text-align: center;
            }
        </style>
        <script src="init.js"></script>
    </head>
    <body onload="init()">
        <h1>MapStore2 Embedded</h1>
        <div id="container"></div>
        <div id="help">
            <h1>Embed MapStore2 in your website</h1>
            <p>
                You can easily embed MapStore2 in your website, and load your UI and configuration dinamically!
            </p>
            <p>
                Use the MapStore2 JavaScript API to add a MapStore2 map and tools to your page.
            </p>
            <pre class="brush: xml">
                <div id="container"></div>
            </pre>
            <pre class="brush: js">
                MapStore2.create('container', {
                    plugins: ["Map"]
                });
            </pre>
            <p>
                Use the <a href="../plugins/" target="_blank">plugins example</a> to save your configuration with
                a meaningful name and use it in the embedded example with the map=&lt;name&gt; parameter.
            </p>
            <p>
                Look at the
                <a href="https://github.com/geosolutions-it/MapStore2/tree/master/web/client/examples/api" target="_blank">full code</a>
                of this example.
            </p>
        </div>
        <script src="../../dist/api.js"></script>
        <script type="text/javascript">
             SyntaxHighlighter.all()
        </script>
    </body>
</html>
